<template>
  <div
    :class="['table', hasAuth ? '' : 'not-auth']"
    @scroll="listenScroll"
    v-click-outside="clickOutSide"
    @click.stop="clickOutSide"
  >
    <div :class="['left', isScrolled ? 'scrolled' : '']">
      <div class="header">{{ tableHeader[0] }}</div>
      <template v-for="(items, index) in tableData">
        <div
          :class="['sub-header', foldList.find(i => i === items.name) ? 'close' : '']"
          @click="foldListClick(items)"
        >
          <div class="content">
            {{ items.name }}
          </div>
        </div>
        <div
          v-for="(item, i) in items.index3_list"
          v-show="!foldList.find(foldListItem => foldListItem === items.name)"
          :class="['body', items.index3_list.length === i + 1 ? 'body-last' : '']"
        >
          <div :class="['content', item.risk ? 'risk' : '']">
            {{ item.name }}
          </div>
          <k-image
            class="abnormal-icon"
            :src="theme === 'dark' ? questionIconDark : questionIcon"
            @click="handleDialog(item)"
            v-if="item.risk"
          ></k-image>
        </div>
      </template>
    </div>
    <div class="right">
      <div class="header">
        <template v-for="(item, index) in tableHeader">
          <div class="header-item" v-if="index !== 0">
            {{ item }}
          </div>
        </template>
      </div>
      <template v-for="(items, index) in tableData">
        <div
          :class="['sub-header', foldList.find(i => i === items.name) ? 'close' : '']"
          @click="foldListClick(items)"
        >
          <div class="wrap">
            <span v-if="items.riskNum" class="risk">
              (<span>{{ items.riskNum }}</span
              >项风险)
            </span>
            <k-image
              v-if="!foldList.find(i => i === items.name)"
              class="body-title-fold-icon"
              :src="FoldIcon"
            ></k-image>
            <k-image v-else class="body-title-unfold-icon" :src="FoldIcon"></k-image>
          </div>
        </div>
        <div
          v-for="(item, i) in items.index3_list"
          :class="[
            'body',
            item.risk ? 'abnormal' : '',
            items.index3_list.length === i + 1 ? 'body-last' : '',
          ]"
          v-show="!foldList.find(foldListItem => foldListItem === items.name)"
        >
          <div class="content-wrap">
            <div :class="['content', item.risk ? 'risk' : '']">
              {{ item.name }}
            </div>
            <k-image
              class="abnormal-icon"
              :src="theme === 'dark' ? questionIconDark : questionIcon"
              @click="handleDialog(item)"
              v-if="item.risk"
            ></k-image>
          </div>
          <div class="body-item">{{ item.score === 'null' ? '/' : item.score }}</div>
          <div class="body-item">{{ item.rank === 'null' ? '/' : item.rank }}</div>
          <div class="body-item" :key="item.value">
            <Notice
              :content="formatData(item.value)"
              @clickPopup="clickPopup(index, i)"
            /><ScoreReadPoup
              v-if="index === showIndexArr[0] && i === showIndexArr[1]"
              title=""
              :content="formatData(item.value)"
              linkText=""
              bottom="20px"
              left="-60px"
            />
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import ScoreReadPoup from '@/components/StockDiagnosis/scoreReadPoup.vue';
import Notice from '@/components/StockDiagnosis/Notice.vue';
import { ref } from 'vue';
import { transferToNumber } from '@/utils';
import vClickOutside from 'vue-click-outside';

import type { TableDataItem, Index3list } from '@/types/scrollTable.d';
import FoldIcon from '../../assets/index/fold-icon.png';
import questionIcon from '@/assets/index/question_icon.png';
import questionIconDark from '@/assets/index/question_icon_dark.png';
interface Props {
  tableHeader: string[];
  tableData: TableDataItem[];
  foldList: string[];
  theme: 'light' | 'dark';
  hasAuth: boolean;
}
defineProps<Props>();
interface Emits {
  (e: 'foldListS', item: TableDataItem): void;
  (e: 'handleDialog', item: Index3list): void;
}
const emits = defineEmits<Emits>();

const isScrolled = ref<boolean>(false);

const showIndexArr = ref<[number, number]>([-1, -1]);

const clickPopup = (index: number, i: number) => {
  showIndexArr.value = [index, i];
};

const clickOutSide = () => {
  showIndexArr.value = [-1, -1];
};

// 格式化数据
const formatData = (num: string | undefined): string => {
  if (num && num === '1.0') {
    return '是';
  } else if (num && num === '0.0') {
    return '否';
  } else if (num) {
    const numFloat = parseFloat(num);
    const numFloatFixed = numFloat.toFixed(2);
    if (!parseFloat(numFloatFixed)) {
      return transferToNumber(numFloat);
    }
    const suffix = num.includes('%') ? '%' : '';
    return numFloatFixed + suffix;
  } else {
    return num || '';
  }
};

// 监听左滑滚动
const listenScroll = (e: Event) => {
  isScrolled.value = !!(e.target as HTMLElement)?.scrollLeft;
};

const foldListClick = (item: TableDataItem) => {
  emits('foldListS', item);
};
const handleDialog = (item: Index3list) => {
  emits('handleDialog', item);
};
</script>

<style scoped lang="less">
@leftlabelWidth: 280px;

.table {
  display: flex;
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding-top: 12px;
  &.not-auth {
    height: 660px;
    overflow-y: hidden;
  }

  .header {
    box-sizing: border-box;
    color: rgba(179, 179, 179, 1);
    font-family: PingFang SC;
    font-size: 26px;
    line-height: 40px;
    white-space: nowrap;
    padding: 11px 0;
  }
  .sub-header {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    font-size: 28px;
    font-family: PingFang SC;
    line-height: 40px;
    background-color: rgba(245, 245, 245, 1);
    color: rgba(38, 38, 38, 1);
    height: 56px;
    &.close {
      margin-bottom: 4px;
    }

    .content {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .body-title-fold-icon,
    .body-title-unfold-icon {
      margin: 0 10px;
      width: 16px;
      height: 12px;
    }
    .body-title-unfold-icon {
      transform: rotate(180deg);
    }
  }
  .body {
    box-sizing: border-box;
    color: rgba(89, 89, 89, 1);
    font-family: PingFang SC;
    font-size: 28px;
    line-height: 40px;
    padding: 11px 0;
    color: #323232;
    margin-top: 4px;
    &-last {
      margin-bottom: 4px;
    }
    .abnormal-icon {
      position: absolute;
      top: 18px;
      right: 12px;
      width: 26px;
      height: 26px;
      cursor: pointer;
    }
    .content-wrap {
      position: relative;
      width: @leftlabelWidth;
      padding-left: 20px;
      padding-right: 20px;
      text-align: left;
      box-sizing: border-box;
      visibility: hidden;
    }
    .content {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      width: 100%;
      &.risk {
        width: calc(100% - 26px);
      }
    }
  }

  .left {
    position: absolute;
    flex-shrink: 0;
    width: @leftlabelWidth;
    display: flex;
    flex-direction: column;
    z-index: 1;
    text-align: left;
    box-sizing: border-box;
    &.scrolled::after {
      content: '';
      position: absolute;
      right: -12px;
      width: 12px;
      height: 100%;
      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
    }

    .header,
    .sub-header,
    .body {
      flex-shrink: 0;
      width: 100%;
      padding-left: 20px;
    }
    .header {
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 1);
    }
    .body {
      position: relative;
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 1);
      padding-right: 20px;
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .header {
      margin-left: @leftlabelWidth;
    }
    .header,
    .body {
      display: flex;
      padding-right: 20px;

      &-item {
        flex-shrink: 0;
        width: 150px;
        text-align: right;
      }
      &-item:last-child {
        position: relative;
        display: flex;
        justify-content: flex-end;
        padding-right: 40px;
      }
    }
    .abnormal {
      color: #ff2436 !important;
      background-color: rgba(255, 36, 54, 0.05) !important;
    }
    .body {
      display: flex;
      align-items: center;
    }
    .sub-header {
      flex-shrink: 0;
      width: 100%;
      padding-right: 20px;
      .wrap {
        display: flex;
        align-items: center;
        position: absolute;
        right: 4px;
        .risk {
          span {
            color: #ff2436;
            font-family: PingFang SC;
          }
        }
      }
    }
  }
}
[theme-mode='black'] {
  .table {
    .header {
      color: #b3b3b3;
      background-color: #0f0f0f;
    }
    .body {
      color: hsla(0, 0%, 100%, 0.6);
      background-color: #0f0f0f;
    }
    .sub-header {
      color: hsla(0, 0%, 100%, 0.84);
      background-color: #212121;
    }
  }
}
</style>
